<template>
	<div class="Fang">
		<div class="FangTop">
			<van-nav-bar title="登陆" left-arrow @click-left="$router.back()" />
		</div>
		<van-form @submit="onSubmit" :validate-first="true" ref="loginForm">
			<div class="Fangdeng">
				<van-cell-group>
					<van-field v-model="username" 
					 name="username" label="手机号"
					 placeholder="请输入手机号"
					:rules="[{ required: true, message: '请填写用户名' },{ pattern:/^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]" />
				</van-cell-group>



				<van-cell-group>

					<van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码"
						:rules="[{ required: true, message: '请填写密码' },{ pattern:/^\w{6,12}$/, message: '密码格式错误' }]" />
				</van-cell-group>

			</div>
			<div class="btn">
				<button native-type="submit">登陆</button>
			</div>

		</van-form>
	</div>
</template>

<script>
	import request from '@/api/request.js'
	import {
		Field,
		Form
	} from 'vant';

	import {
		login
	} from '@/api/user.js'
	export default {
		data() {
			return {
				username: '',
			
				password: '',
		
			}
		},
		created() {
			// request.post('/user/delete_user',{
			//  username:'18339413550',
			//  password:'123456'
			// })
		},
		methods: {
			onSubmit(values) {
				
				login(values).then(res => {

					if (res.code == 0) {
						this.$toast(res.msg);
						let {
							token,
							tokenExpired,
							uid,
							userInfo
						} = res;

						localStorage.setItem('token', token)
						localStorage.setItem('tokenExpired', tokenExpired)
				           
						   this.$store.commit('user/SET_lOGIN_STATE',true)
						   this.$store.commit('user/setUserInfo',userInfo)
						   this.$store.commit('user/setUid',uid)
						   
						
						setTimeout(v => {
							this.$router.back()
						}, 500)


					} else {
						this.$toast(res.msg)
					}
				})



			},

		},
		components: {
			[Field.name]: Field,
			[Form.name]: Form,
		}

	}
</script>

<style>
	.Fang {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.van-nav-bar .van-icon {
		color: #fff;
	}

	.van-nav-bar__content {
		background-color: #07c160;
	}

	.van-nav-bar__title {
		/* font-size: 5.26667vw; */
		color: #fff;
	}

	.van-field__button {

		width: 80px;
		padding-right: 10px;
		color: black;
		border-radius: 20px;
	}

	van-cell-group {
		display: flex;
	}

	van-cell-group i {
		padding-top: 7px;
		padding-left: 6px;
	}

	.Fangma {
		display: flex;
	}

	.Fangma i {
		padding-top: 7px;
		padding-left: 6px;
	}

	.Fang .btn button {
		margin: 30px 0 0 37px;
		width: 80vw;
		height: 40px;
		background-color: #07c160;
		border: #07c160;
		font-size: 20px;
		color: #fff;
	}
</style>
